<template>
	<view>
		<view class="auth">
			<view class="wanl-title">请输入账号</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入手机号 / 用户名" placeholder-class="placeholder" name="account" type="text"
						maxlength="16" confirm-type="next" @input="onKeyInput" v-model="phone"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button form-type="submit" class="cu-btn sl radius-bock bg-orange"
						:disabled="submitDisabled">下一步</button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
					@change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''"
						:checked="checked == 2 ? true : false" value="2" />
					<view>
						我已阅读<text
							@tap="onDetails(1)">用户协议</text>及<text
							@tap="onDetails(2)">隐私权保护声明</text>
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="register">注册</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
	</view>
</template>
<script>
	import graceChecker from '@/utils/graceChecker.js';
	export default {
		data() {
			return {
				submitDisabled: true,
				providerList: [],
				loginRes: {},
				pageroute: '',
				checked: 0,
				phone: '',
			};
		},
		onLoad(option) {

		},
		methods: {
			CheckboxChange(e) {
				console.log(e)
				this.checked = e.detail.value;
			},
			onKeyInput(e) {
				this.submitDisabled = this.phone == '' ? true : false
				// this.submitDisabled = false
			},
			// 账户登录
			formSubmit(e) {
				if (this.checked == 2) {
					//将下列代码加入到对应的检查位置
					//定义表单规则
					let rule = [{
						name: 'account',
						checkType: 'phoneno',
						errorMsg: '不是手机号码'
					}];
					//进行表单检查
					let formData = e.detail.value;
					let checkRes = graceChecker.check(formData, rule);
					// ..检查是否注册-没注册跳转注册
					if (checkRes) {
						this.$api.get({
							url: '/wanlshop/validate/check_mobile_exist',
							data: {
								mobile: formData.account
							},
							success: res => {
								console.log(res)
								if (res.code == 1) {
									uni.navigateTo({
										url: `/pages/Login/phone?mobile=${formData.account}&url=${this.pageroute}`
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							},
							fail: res => {
								uni.showModal({
									title: '提示',
									content: '账号不存在，是否注册？',
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: `/pages/Login/Register_new/Register_new?mobile=${formData.account}&url=${this.pageroute}`
											})
											// this.$wanlshop.to(`register?mobile=${formData.account}&url=''`);
										} else if (res.cancel) {
											console.log('取消');
										}
									}
								});
							}
						})
					} else {
						if (formData.account) {
							uni.navigateTo({
								url: `/pages/Login/name?name=${formData.account}&url=${this.pageroute}`
							})
							this.$wanlshop.to(`name?name=${formData.account}&url=${this.pageroute}`, 'none');
						} else {
							this.$wanlshop.msg('请填写账号');
						}
					}
				} else {
					this.checked = 1;
					setTimeout(() => {
						this.checked = 0;
						this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
					}, 300)
				}
			},

			register() {
				console.log('-----')
				uni.navigateTo({
					url:'/pages/Login/Register_new/Register_new'
				})
				// uni.navigateTo({
				// 	url: '/pages/Login/register'
				// })
			},
			help() {
				uni.navigateTo({
					url: `/pages/Login/help?url=${this.pageroute}`
				})
			},
			onDetails(num){
				uni.navigateTo({
					url: `/pages/UserCenter/Privacy/Privacy?id=${num}`
				})
			}

		}
	};
</script>

<style>
	@import url("./auth.css");

	.bg-gray {
		background-color: #f0f0f0;
		color: #333333;
	}

	.bg-orange {
		background-color: #fe6600;
		color: #ffffff;
	}
</style>